import type { Directive } from 'vue'
import { useUserStore } from '@/store/user'

const permission: Directive = {
  mounted(el, binding) {
    const { value } = binding
    const userStore = useUserStore()
    
    if (value && value instanceof Array) {
      const hasPermission = userStore.permissions.some(permission => {
        return value.includes(permission)
      })

      if (!hasPermission) {
        el.parentNode?.removeChild(el)
      }
    }
  }
}

export default permission